<template>
  <table :style="styleA">
    <tr>
      <th :style="styleB">编号</th>
      <th :style="styleB">品牌名称</th>
      <th :style="styleB">创立时间</th>
      <th :style="styleB">操作</th>
    </tr>
    <tr v-for="(item, index) of showBrands" :key="index">
      <td :style="styleB">{{ item.id }}</td>
      <td :style="styleB">{{ item.name }}</td>
      <td :style="styleB">{{ item.date }}</td>
      <td :style="styleB">
        <input type="button" value="删除" @click="remove(item.id)" />
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      styleA: {
        width: "400px",
        border: "1px solid black",
        textAlign: "center",
        margin: "10px auto",
      },
      styleB: {
        border: "1px solid black",
      },
      filter: "",
    }
  },
  props: ["brands"],
  computed: {
    showBrands() {
      console.log(this.brands);
      return this.filter? this.brands.filter((v) => v.name.indexOf(this.filter) > -1): this.brands;
    },
  },
  methods: {
    remove(id) {
      this.$emit("remove", id);
    },
  },
  mounted() {
    // 监听事件
    this.$bus.$on("search", (value) => (this.filter = value));
  },
};
</script>





